<template>
  <el-container>
    <el-aside class="menu-box" :style="{width: menuWidth+'px'}">
      <img class="logo" src="@assets/images/logo-white.png" />
      <el-menu
          :default-active="defaultPath"
          :collapse="isCollapse"
          class="el-menu-vertical"
          @open="handleOpen"
          @close="handleClose"
          router
          @mouseenter="menuOver" @mouseleave="menuOut"
      >
        <template v-for="(item,idx) in navList">
          <template v-if="item.children">
            <el-sub-menu :index="item.id+''">
              <template #title>
<!--                暂时注释-->
<!--                <el-icon><component :is="item.meta.icon" /></el-icon>-->
                <span>{{item.name}}</span>
              </template>
              <el-menu-item-group>
                <template v-for="(opt,i) in item.children">
                  <template v-if="opt.children">
                    <!--  渲染三级  -->
                    <el-sub-menu :index="opt.id+''">
                      <template #title>{{opt.name}}</template>
                      <el-menu-item-group>
                        <template v-for="(o,k) in opt.children">
                          <el-menu-item :index="o.id+''" :route="o.path" @click="handleSelect(o)">
                            {{o.name}}-{{o.path}}
                          </el-menu-item>
                        </template>
                      </el-menu-item-group>
                    </el-sub-menu>
                  </template>
                  <template v-else>
                    <!--  渲染二级  -->
                    <el-menu-item :index="opt.id+''" :route="opt.path" @click="handleSelect(opt)">
                      {{opt.name}}
                    </el-menu-item>
                  </template>
                </template>
              </el-menu-item-group>
            </el-sub-menu>
          </template>
<!--          <template v-else>
            <el-menu-item :index="item.path" :route="item.path">
              <el-icon><component :is="item.meta.icon" /></el-icon>
              <template #title>{{item.name}}</template>
            </el-menu-item>
          </template>-->
        </template>
      </el-menu>
      <div class="collapse-btn" :style="{width: menuWidth+'px'}">
        <el-icon v-if="isCollapse" @click="collapseHandle(false)"><Expand /></el-icon>
        <el-icon v-else @click="collapseHandle(true)"><Fold /></el-icon>
      </div>
    </el-aside>
    <!--   页面右侧   -->
    <div class="rebar-wrap">
      <rebar-main-head :breadcrumbList="breadcrumbList"></rebar-main-head>
      <!--   页面主题   -->
      <el-main>
        <router-view/>
      </el-main>
    </div>
  </el-container>
</template>
<script>
import { getAuthDomain } from '@/api/api.js'
import menuList from '@/router/router';
import RebarMainHead from "@/views/menu/rebarMainHead";
import { generateChildRouters,arrayToTree } from '@/utils/util'

export default {
  components: {RebarMainHead},
  data() {
    return {
      menuWidth: 240,
      isCollapse: false,
      // navList: [],
      // defaultPath: this.$store.state.currentPath,
      breadcrumbList: [],
      isOpen: true,
    }
  },
  computed: {
    defaultPath(){
      return this.$store.state.currentPath+''
    },
    navList(){
      return this.$store.state.allRoutes
    }
  },
  watch: {
    '$store.state.currentMenu':{
      deep: true,
      immediate: true,
      handler(n,o){
        let currentMenu = localStorage.getItem('currentMenu');
        if(currentMenu && currentMenu != '{}'){
          currentMenu = JSON.parse(currentMenu);
          console.log(currentMenu);
          let {parentName,parentPath,currentName,currentPath,} = currentMenu;
          let list = [];
          list.push({
            name: parentName,
            path: parentPath
          },{
            name: currentName,
            path: currentPath
          })
          this.breadcrumbList = list;
        }
      }
    }
  },
  created() {
    // this.navList = menuList;

    this.setdefaultMenu();
    // this.getMenu();

    console.log(this.tabRoutes)
  },
  mounted() {
    document.querySelector('.menu-box').style.minHeight = document.documentElement.clientHeight+'px';
  },
  methods: {
    async getMenu(){
      let crarIdList = [];
      let userInfo = JSON.parse(localStorage.getItem('userInfo'));
      userInfo.authList.forEach(opt => {
        crarIdList.push({'crarId': opt.crar_id});
      })
      // let res = await getAuthDomain({"orderBy":"order_marks","authDomain":"comm_menu",crarIdList});
      // if(res.data.resultCode != 200) return;
    },
    setdefaultMenu(){
      // debugger
      //菜单默认值
      if(localStorage.getItem('currentPath')){
        this.$store.commit('changeCurrentPath',localStorage.getItem('currentPath'));
      }else{
        this.defaultPath = this.$store.state.currentPath;
        this.breadcrumbList = [];
        /*this.breadcrumbList = [{
          name: "翻样管理",
          path: "/proofingManage"
        },{
          name: "料单翻样",
          path: "/proofingManage/MaterialProofing"
        }];*/
      }
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleSelect(item){
      let parentName = item.meta.nativeTitle.split('|')[0];
      // let parentPath = item.path;
      let obj = {}
      obj = {
        currentName: item.name,
        currentPath: item.path,
        parentName,
        // parentPath,
        item,
      }
      this.$store.commit('changeCurrentMenu',obj);
      this.$store.commit('changeCurrentPath',item.menu_url);
      localStorage.setItem('currentMenu',JSON.stringify(obj));
      localStorage.setItem('currentPath',item.id);
    },
    collapseHandle(flag){
      console.log(flag)
      this.isCollapse = flag;
      this.menuWidth = flag ? 90 : 240;
      this.isOpen = !flag;
    },
    menuOver(){
      if(this.isOpen) return;

      this.isCollapse = false;
      this.menuWidth = 240;
    },
    menuOut(){
      if(this.isOpen) return;

      this.isCollapse = true;
      this.menuWidth = 90;
    },
  },
}
</script>
<style>
body{
  margin: 0;
}
</style>
<style lang="scss" scoped>
.menu-box{
  //min-height: 980px;
  text-align: center;
  background: #1C2A40;
  box-shadow: 6px 0px 15px 0px rgba(8, 15, 24, 0.7);
  position: relative;
  overflow: hidden;

  .logo{
    width: 77px;
    margin: 18px 0;
  }
  .collapse-btn{
    height: 46px;
    line-height: 2.2;
    color: #F0F0F0;
    font-size: 24px;
    background: #212F43;
    box-shadow: 0px -2px 6px 0px rgba(19, 31, 51, 0.86);
    position: absolute;
    bottom: 0;
    cursor: pointer;
  }

  .el-menu-vertical {
    background: #1C2A40;
    border-right: none;
    ::v-deep(.el-menu){
      background: rgba(38,52,72,0.7);
      border-right: none;

      &:before{
        content: '';
        border-left: 6px solid;
        position: absolute;
        left: 0;
        height: 100%;

        background-clip:padding-box,border-box;
        background-origin:padding-box,border-box;
        background-image:linear-gradient(to right,rgba(24, 79, 191), rgba(42, 142, 255)),linear-gradient(to right,rgba(24, 79, 191), rgba(42, 142, 255));
        border-left:6px transparent solid;

      }
    }
    ::v-deep(.el-menu-item){
      color: #BBC4D1;
      font-size: 15px;
    }
    ::v-deep(.el-sub-menu .el-menu-item){
      margin-left: 6px;

      &:before{
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #BBC4D1;
        margin-right: 10px;
      }
    }
    ::v-deep(.el-sub-menu__title){
      color: #fff;
      font-weight: bold;
      margin-left: 6px;
    }
    ::v-deep(.el-sub-menu__title:hover), ::v-deep(.el-menu-item:hover){
      background-color: #263448;
      color: #198BFF;
      &:before{
        background-color: #198BFF;
      }
    }
    ::v-deep(.el-menu-item.is-active){
      font-weight: bold;
      color: #198BFF;
      &:before{
        background-color: #198BFF;
      }
    }

  }
}
.rebar-wrap{
  flex: 1;
}
</style>

